import { useState, useEffect, Fragment } from 'react';
import { Modal, Button, message } from 'antd';
import { ProFormText } from '@ant-design/pro-form';
import MapChoose from '@/components/MapChoose';
interface IMap {
	longitude: string;
	latitude: string;
}
function ChooseAddrModal(props: {
    modalTitle?: string;
	placeholder?: string;
	disabled?: boolear;
    center?: IMap;
	onChange?: (e:{ addressPoint: IMap; address: string; }) => void;
	value?: { addressPoint: IMap; address: string; };
}) {
	const { modalTitle, center, placeholder, disabled = false, onChange, value } = props;
	// 选择地图弹窗显示状态
	const [mapModalVisible, setMapModalVisible] = useState<boolean>(false); 
	// 已选地理位置参数
	const [addressPoint, setAddressPoint] = useState<IMap>({ longitude: '0', latitude: '0' });
	const [address, setAddress] = useState<string>(''); // 组件内部临时记录的地址，即将传给父组件

	// 页面初始化
	useEffect(() => {
		// onChange?.(null);
	}, []);

	// 传给地图选择的方法
	const setAddressPointFun = (param: IMap, address: string) => {
		setAddressPoint(param);
		setAddress(address);
		return;
	}

	// 清空选择的地址
	const cancelMeetAddrMap = () => {
		setAddressPoint({ longitude: '0', latitude: '0' });
		setAddress('');
		// setMapModalVisible(false);
	}

	const saveMeetAddrMap = () => {
		if (addressPoint && addressPoint.longitude !== '0' && addressPoint.latitude !== '0') {
			onChange?.({ addressPoint, address });
		} else {
			// onChange?.(null);
			message.error('您当前没有选择地址，请选择');
		}
		setMapModalVisible(false);
	};
  	return (
	<Fragment>
		<div className='disabledFieldPropsCom' onClick={()=> setMapModalVisible(true)}>
			<ProFormText allowClear={false} disabled={disabled} fieldProps={{ value: value?.address }} placeholder={placeholder || '请选择地址'} />
		</div>
	  
		<Modal
			destroyOnClose
			width={1000}
			centered
			maskClosable={false}
			title={modalTitle ? modalTitle : '地址选择'}
			visible={mapModalVisible}
			onOk={() => {
				saveMeetAddrMap();
			}}
			onCancel={()=>setMapModalVisible(false)}
			footer={[
				<Button key="back" onClick={()=>setMapModalVisible(false)}>
					关闭
				</Button>,
				<Button key="cancel" type="primary" onClick={cancelMeetAddrMap}>
					清空
				</Button>,
				<Button key="ok" type="primary" onClick={saveMeetAddrMap}>
					确定
				</Button>,
			]}
		>
			<div className="map-modal-div">
				<MapChoose
					center={center || { longitude: '0', latitude: '0' }}
					address={address}
					setMeetAddrMap={(param: IMap, address: string) => setAddressPointFun(param, address)}
				/>
			</div>
		</Modal>
	</Fragment>
  );
}

export default ChooseAddrModal;
